<template>
    <div class="animation">
        <div class="num" v-if="!isStop">剩余次数 {{ allGroupNum - num }}</div>
        <div class="circular" ref="circular">{{status}}</div>
    </div>
</template>
<script>
export default {
    name: 'animation1',
    props: {
        allGroupNum: {
            type: Number,
            default(){
                return 3
            }
        },
        groupInfo:{
            type: Array,
            default() {
                return [
                    { msg: '深深吸气' , duration: 4 },
                    { msg: '慢慢呼气' , duration: 8 }
                ]
            }
        },
        isStop: {
            type: Boolean,
            default() {
                return false
            }
        }
    },
    data() {
        return {
            status: '',
            timer: '',
            num: 0,
        }
    },
    mounted() {
        if (this.isStop) return
        this.start()
    },
    watch: {
      isStop(val) {
          if (!val) {
            console.log('状态改变，开始动画1')
            this.start()
          }
      }  
    },
    methods: {
        start() {
            const groupDuration = this.getTotalDuration()
            console.log(` 一组时长：${groupDuration} s，共：${this.allGroupNum} 组`)

            this.changeTxt()
            this.$refs.circular.style.animationPlayState = 'running'
            this.timer = setInterval(() => {
                console.log('完成第：' + this.num + '组')
                this.changeTxt()
            }, groupDuration * 1000)
        },
        changeTxt() {
            if(this.num !== this.allGroupNum){
                this.num ++
            } else {
                this.$refs.circular.style.animationPlayState = 'paused'
                clearInterval(this.timer)
                return
            }
            this.status = this.groupInfo[0].msg
            setTimeout(() => {
                this.status = this.groupInfo[1].msg
            }, this.groupInfo[0].duration * 1000) 
        },
        getTotalDuration() {
            return this.groupInfo.reduce((total, num) => {
                if (total instanceof Object) {
                    return total.duration + num.duration
                } else if (!isNaN(total)){
                    return total + num.duration
                }
            })
        }
    },
    destroyed() {
        clearInterval(this.timer)
    },
}
</script>
<style scoped>
    .num {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 30px;
    }
    .animation{
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circular{
        height: 330px;
        width: 330px;
        text-align: center;
        box-sizing: border-box;
        border-radius: 50%;
        animation-play-state: paused;
        animation: changeborder 12s linear infinite;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @keyframes changeborder {
        0%{
            border: 30px solid #6187B0;
            background: #87ACD8; 
            font-size: 50px;
            color: #fff;
        }
        2%{
            border: 30px solid #ECCE99;
            background: #FAEAD3;
            color: #666;
        }
        34% {
            border: 90px solid #ECCE99;
            background: #FAEAD3;
            font-size: 30px;
            color: #666;
        }
        36% {
            border: 90px solid #6187B0;
            background: #87ACD8;
            font-size: 30px;
            color: #fff;
        }
        100% {
            border: 30px solid #6187B0;
            background: #87ACD8;
            color: #fff;
            font-size: 50px;
        }
    }

</style>